<!-- popupStepper -->
<template>
  <div class="popupStepper">
    <div class="flex align-center header_box">
      <span
        v-for="item of tips"
        :key="item.name"
        :class="[acttips == item.name ? 'activeClass' : '']"
        @click="chose(item.name)"
      >
        <i :class="item.icon || 'el-icon-document'"></i> {{ item.name }}</span
      >
    </div>
    <div class="content_box">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'popupStepper',
  components: {},
  data () {
    //这里存放数据
    return {

    };
  },
  props: {
    tips: {
      type: Array,
      default: function () {
        return []
      }
    },
    acttips: {
      type: String,
      default: ""
    }
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    chose (name) {
      this.$emit('choseTips', name)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.header_box {
  width: 100%;
  background-color: #eae9ee;
  height: 50px;
  color: rgba(51, 51, 51, 0.4);
  box-sizing: border-box;
  padding: 0 20px;
}
.header_box > span {
  display: block;
  white-space: nowrap;
  margin-right: 20px;
  line-height: 50px;
  padding: 0 15px;
  transition: all 0.25s linear;
  cursor: pointer;
}
.header_box > span :hover {
}
.content_box {
  border-left: 4px solid #eae9ee;
}
.activeClass {
  background-color: #fff;
  color: #333;
  font-weight: 500;
}
</style>